<template>
  <div>
    <div class="header">物流查询</div>
    <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link" ref="text">
        物流公司<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="0">中通</el-dropdown-item>
        <el-dropdown-item command="1">圆通</el-dropdown-item>
        <el-dropdown-item command="2">汇通</el-dropdown-item>
        <el-dropdown-item command="3">韵达</el-dropdown-item>
        <el-dropdown-item command="4">德邦</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <div class="input">
      <el-input v-model="code" placeholder="请输入订单编号"></el-input>
    </div>
    <el-button style="color:  #409EFF" @click="getShipping">查询</el-button>
    <div class="table" v-if="tableData">
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="acceptStation"
          label="物流状态"
          width="650">
        </el-table-column>
        <el-table-column
          prop="acceptTime"
          label="更新时间"
          width="150">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Shipping',
  data () {
    return {
      menu:['中通','圆通','汇通','韵达','德邦'],
      type:5,
      code:'',
      tableData: ''
      // isCode:false
    }
  },
  // watch:{
  //   code(newValue){
  //     this.isCode=/^\d{10}$/.test(newValue)
  //   }
  // },
  methods: {
    handleCommand(command) {
      const type=parseInt(command);
      this.type=type;
      this.$refs.text.innerHTML=this.menu[type]+"<i class='el-icon-arrow-down el-icon--right'></i>"
    },
    getShipping(){
      if(this.type==5){
        this.$message({
          message: '请选择需要查询的物流公司名称！',
          type: 'warning',
          center: true
        })
      }else if(!this.code){
        this.$message({
          message: '请输入正确的物流单号！',
          type: 'warning',
          center: true
        })
      }else{
        const {type,code}=this
        axios.get('http://106.15.238.66:9100/shipping/'+type+'/'+code).then(res=>{
          if(res.data.data.traces){
            this.tableData=res.data.data.traces
          }
          console.log(res.data.data.traces)
        }).catch(err=>{
          console.log(err)
        })
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;

  }
  .header{
    text-align: center;
    margin-bottom: 25px;
  }
  .input{
    display: inline-block;
    width:250px;
    margin-left: 20px;
    margin-right: 10px;
  }
  .table{
    width:800px;
    margin: 20px auto;

  }
</style>
